<template>
	<view class="_coach_index">
		<view class="_teacher_index" @click="goCoach">
			<image class="teacher_img" :src="props.coach.avatar" mode="aspectFill"></image>
			<view class="teacher-info">
				<view class="u-flex u-flex-between u-flex-items-center">
					<view class="f-s-14 f-w-b u-m-b-8">{{ props.coach.name }}</view>
					<view class="f-s-12 c-f26">{{props.coach.score}}</view>
				</view>
					<!-- <tag color="#fff" background="#2080f7" :text="props.coach.label.split(',')[0]"></tag> -->
				<view class="teacher-slogan u-line-1">{{ props.coach.major}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		defineProps
	} from 'vue';

	const props = defineProps({
		coach: Object
	})
	const goCoach = () => {
		uni.navigateTo({
			url: '/subPackages/coach/info?id=' + props.coach.id
		})
	}
</script>

<style lang="scss" scoped>
	._coach_index {
		padding: 1px;
		width: 140px;
		margin-right: 8px;


		.teacher_img {
			// 从左到右渐变
			background: linear-gradient(to right, #E8EBF2, #E8EBF2 40%, #EEEFF4 70%, #F3F4F8);
			width: 100%;
			height: 160px;
			border-radius: 8px 8px 0 0;
		}

		.teacher-info {
			padding: 8px;
			text-align: left;
			background-color: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 4px #0000000a;
			height: 40px;


			.teacher-slogan {
				line-height: 18px;
				font-size: 12px;
				color: #333
			}

		}
	}
</style>